<template>
	<div>
	  <el-row :gutter="20">
		<div id="line" class="chart"></div>
    </el-row>
	</div>
</template>

<script>
import Util from "@/assets/js/util";
export default {
  name: "WeekData",
  computed: {
	  chartLine() {
	    return this.$echarts.init(Util.getDom("line"));
	  },
  },
  methods: {
	  drawLine() {
	    this.$axios.get("/chart-simple/line").then(res => {
	      let title = "用户周活跃度";
	      this.chartLine.setOption({
	        title: Object.assign({}, Util.defaultEchartsOpt.title, {text: title}),
	        tooltip: {
	          trigger: "axis",
	          formatter: "{a} <br/>{b} : {c}"
	        },
	        xAxis: {
	          type: "category",
	          data: res.data.xData,
	          boundaryGap: false,
	          splitLine: {
	            show: false,
	            interval: 'auto',
	            lineStyle: {
	              color: ['#D4DFF5']
	            }
	          },
	          axisLine: {
	            lineStyle: {
	              color: '#999'
	            }
	          },
	          axisLabel: {
	            margin: 10,
	            textStyle: {
	              fontSize: 12
	            }
	          }
	        },
	        yAxis: {
	          type: "value",
	          splitLine: {
	            lineStyle: {
	              color: ['#D4DFF5']
	            }
	          },
	          axisTick: {
	            show: false
	          },
	          axisLine: {
	            lineStyle: {
	              color: '#999'
	            }
	          },
	          axisLabel: {
	            margin: 10,
	            textStyle: {
	              fontSize: 12
	            }
	          }
	        },
	        series: [
	          {
	            name: title,
	            data: res.data.yData,
	            type: "line",
	            smooth: true,
	            showSymbol: false,
	            symbol: 'circle',
	            symbolSize: 6,
	            areaStyle: {
	              normal: {
	                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	                  offset: 0,
	                  color: 'rgba(199, 237, 250, 0.5)'
	                }, {
	                  offset: 1,
	                  color: 'rgba(199, 237, 250, 0.2)'
	                }], false)
	              }
	            },
	            itemStyle: {
	              normal: {
	                color: 'rgba(32, 254, 255, 0.5)'
	              }
	            },
	            lineStyle: {
	              normal: {
	                width: 2
	              }
	            }
	          }
	        ]
	      });
	    });
	    return this;
	  },
	  resizeChart() {
	    window.addEventListener("resize", () => {
	      this.chartLine.resize();
	    });
	  }
  },
  mounted() {
  
    this.drawLine().resizeChart();
  }
}
</script>

<style scoped lang="less">
.el-row {
  margin-top: 20px;
}
.chart {
  width: 100%;
  height: 330px;
  .border-radius(8px);
  background-color: @boxBgColor;
  box-shadow: 0 0 5px transparent;
  &:hover {
    box-shadow: 0 0 5px @mainColor;
  }
}
</style><style scoped lang="less">
.el-row {
  margin-top: 20px;
}
.chart {
  width: 100%;
  height: 330px;
  .border-radius(8px);
  background-color: @boxBgColor;
  box-shadow: 0 0 5px transparent;
  &:hover {
    box-shadow: 0 0 5px @mainColor;
  }
}
</style>
